<template>
  <Card>
    <div class="flexCSB">
      <Button type="primary" @click="getAdd">新增展览类型</Button>
    </div>
    <Table
      class="table"
      :loading="loading1"
      highlight-row
      :columns="columns"
      :data="tableData"
    ></Table>
    <Page
      show-total
      class="page"
      :total="total"
      :current.sync="pageNum"
      :page-size="pageSize"
      show-elevator
      @on-change="changePage"
    />
    <Modal
      :title="modelTitle"
      v-model="modal"
      :closable="false"
      :mask-closable="false"
      width="40"
    >
      <Form
        ref="form"
        :model="exhibition"
        :rules="ruleValidate"
        :label-width="110"
      >
        <FormItem label="展览类型名称" prop="name">
          <Input
            v-model="exhibition.name"
            placeholder="请输入展览类型名称"
            style="width: 300px; margin-left: 0px"
          ></Input>
        </FormItem>
        <FormItem label="展览类型权重" style="position: relative">
            <InputNumber
              v-model="exhibition.weight"
              placeholder="请输入展览类型权重"
              :step="1"
              :min="0"
              style="width: 300px; margin-left: 0px"
            ></InputNumber>
          </FormItem>

        <Form-item style="text-align: right">
          <Button type="primary" @click="handleSubmit('form')">提交</Button>
          <Button @click="handleReset('form')" style="margin-left: 8px"
            >取消</Button
          >
        </Form-item>
      </Form>
      <div slot="footer">
      </div>
    </Modal>
  </Card>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { title: "展览类型名称", key: "name", align: "center" },
        { title: "展览类型权重", key: "weight", align: "center"},
        {
          title: "操作",
          align: "center",
          width: "180px",
          fixed: "right",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: { type: "primary" },
                  style: {
                    "margin-left": "10px",
                  },
                  on: {
                    click: () => {
                      this.getUpdate(params);
                    },
                  },
                },
                "修改"
              ),
              h(
                "Button",
                {
                  props: { type: "error" },
                  style: {
                    "margin-left": "10px",
                  },
                  on: {
                    click: () => {
                      this.del(params);
                    },
                  },
                },
                "删除"
              ),
            ]);
          },
        },
      ],
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      loading1: false,
      modal: false,
      exhibition: {
        name: "",
        weight:''
      },
      ruleValidate: {
        name: [
          { required: true, message: "展览类型名称不能为空", trigger: "blur" },
        ]
      },
      id: "",
      modelTitle: "新增展览类型",
    };
  },
  created() {
    this.getData();
  },
  mounted() {},
  methods: {
    // 获取数据
    getData() {
      this.loading1 = true;
      this.$http(
        "/ztmuseum/stage/exhibition-type/getExhibitionTypeList",
        {
          current: this.pageNum,
          size: this.pageSize,
        },
        "post",
        (res) => {
          console.log(res);
          if (res.data.code == 1000) {
            this.tableData = res.data.data.records;
            this.total = res.data.data.total;
          } else {
            this.$Message.error(res.data.msg);
          }
          this.loading1 = false;
        }
      );
    },

    // 删除
    del(params) {
      this.$confirm("此操作将永久删除该展览类型, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http(
            "/ztmuseum/stage/exhibition-type/deleteExhibitionType",
            {
              id: params.row.id,
            },
            "post",
            (res) => {
              console.log(res);
              if (res.data.data == true&&res.data.code==1000) {
                this.$Message.success('删除成功')
                // this.reload();
                this.pageNum=1
                this.getData();
              } else {
                this.$Message.error(res.data.msg)
              }
            }
          );
        })
        .catch(() => {
         this.$Message.error('已取消删除')
        });
    },
    // 新增展览类型
    getAdd() {
      this.modal = true;
      this.modelTitle = "新增展览类型";
      this.exhibition = {
        name: "", 
        weight:""
      };
      this.id = "";
    },
    // 新增||修改
    handleSubmit(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          // this.$Message.success("提交成功!");
          if (this.modelTitle == "新增展览类型") {
            console.log(444);
            this.$http(
              "/ztmuseum/stage/exhibition-type/addExhibitionType",
              {
               
                name: this.exhibition.name,
                weight:this.exhibition.weight
              },
              "post",
              (res) => {
                console.log(res);
                console.log(res.data.data);
                if (res.data.code == 1000&&res.data.data) {
                  this.modal = false;
                  this.$Message.success(res.data.msg);
                  this.getData();
                } else {
                  this.$Message.error(res.data.msg);
                }
              }
            );
          } else {
            this.$http(
              "/ztmuseum/stage/exhibition-type/updateExhibitionType",
              {
                id: this.id,
                name: this.exhibition.name,
                weight: this.exhibition.weight
              },
              "post",
              (res) => {
                if (res.data.code == 1000&&res.data.data) {
                  this.modal = false;
                  this.$Message.success(res.data.msg);
                  this.getData();
                } else {
                  this.$Message.error(res.data.msg);
                }
              }
            );
          }
        } else {
          this.$Message.error("表单验证失败!");
        }
      });
    },
    handleReset(form) {
      this.modal = false;
      this.$refs[form].resetFields();
    },
    // 分页，改变页码
    changePage(data) {
      console.log(data);
      this.pageNum = data;
      this.getData();
    },
    // 时间选择器
    getUpdate(params) {
      console.log(params.row);
      this.modal = true;
      this.modelTitle = "修改展览类型";
      this.id = params.row.id;
      this.exhibition = {
        name: params.row.name, 
        weight: params.row.weight
      };
    },
  },
};
</script>

<style scoped>
</style>
